Flutter-Android开发者文档 - 手势检测及触摸事件处理

喜欢我的小伙伴，一定要关注我的微信公众号啊！！！谢谢啦 AllAboutCoding

此文章为翻译Flutter官网的Flutter for Android Developers - Gesture detection and touch event handling有兴趣的小伙伴可以移步官网查看。

手势检测及触摸事件处理

在Flutter中如何给Widget添加点击事件监听？

Widget的手势事件如何处理？

使用** GestureDetector**，你可以监听大部分手势，例如：

• 点击

  • onTapDown 指针在屏幕的某个地方接触产生点击
  • onTapUp 指针在屏幕的某个地方触发点击
  • onTap 点击已发生
  • onTapCancel

• 双击

  • onDoubleTap 用户在同一个地方连续点击两下

• 长按

  • onLongPress 指针在同一位置长时间与屏幕接触

• 垂直拖拽

  • onVerticalDragStart 指针已经接触屏幕，并且可能垂直移动。
  • onVerticalDragUpdate 指针已经接触屏幕并且进一步垂直移动。
  • onVerticalDragEnd 指针之前与屏幕接触并在屏幕上垂直移动，停止与屏幕接触时以一个特定的速度。

• 水平拖拽

  • onHorizontalDragStart 指针已经接触屏幕，并且可能水平移动。
  • onHorizontalDragUpdate 指针已经接触屏幕并且进一步水平移动。

  • onHorizontalDragEnd 指针之前与屏幕接触并在屏幕上水平移动，停止与屏幕接触时以一个特定的速度。 下面的例子展示了使用GestureDetector双击后旋转Flutter Logo：

    AnimationController controller;
    CurvedAnimation curve;

@override void initState() { controller = new AnimationController(duration: const Duration(milliseconds: 2000), vsync: this); curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn); }

class SampleApp extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( body: new Center( child: new GestureDetector( child: new RotationTransition( turns: curve, child: new FlutterLogo( size: 200.0, )), onDoubleTap: () { if (controller.isCompleted) { controller.reverse(); } else { controller.forward(); } }, ), )); } }